<template>
    <div class="box">
        <div class="header">
            <div style="width: 2.2rem">
                <img
                    src="../assets/img/logo@2x.png"
                    alt=""
                    style="width: 0.5rem; cursor: pointer"
                    @click="gobalck" />
            </div>

            <label class="title">西宁市再生资源管理平台</label>
            <div class="right_title" style="width: 2.2rem">
                <span>{{ timenow }}</span>
            </div>
        </div>

        <div class="select_box" id="select_box">
            <!-- <el-select v-model="years" placeholder="年份" popper-class='dasuju'>
				<el-option v-for="item in yearsoptions" :key="item.value" :label="item.label" :value="item.value"
					effect='dark'>
				</el-option>
			</el-select>

			<el-select v-model="xz" placeholder="乡/镇" popper-class='dasuju'>
				<el-option v-for="item in xzoptions" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select> -->
            <!-- <el-select v-model="cun" placeholder="村/景点" popper-class='dasuju'>
				<el-option v-for="item in cunoptions" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select> -->
            <!-- <el-select v-model="wangd" placeholder="社区" popper-class='dasuju'>
				<el-option v-for="item in wangdoptions" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select> -->
        </div>

        <div class="mid">
            <div class="left_mid">
                <!--实时数据-->
                <div class="table">
                    <label class="title">实时数据</label>
                    <div class="header_table">
                        <span></span>
                        <span>品类</span>
                        <span>类别代码</span>
                        <span>重量(kg)</span>
                        <span>社区</span>
                        <span>负责人</span>
                        <span>上传时间</span>
                        <span>今日(kg)</span>
                        <span>本月(kg)</span>
                    </div>
                    <div
                        class="list_scrool"
                        v-loading="table.length == 0"
                        element-loading-background="rgb(24,26,33)">
                        <vue-seamless-scroll
                            v-if="table.length > 0"
                            :data="table"
                            :class-option="defaultOption"
                            @ScrollEnd="finishgun">
                            <ul class="ul-scoll">
                                <li v-for="(item, index) in table" :key="index">
                                    <span
                                        ><span>{{ index + 1 }}</span></span
                                    >
                                    <span style="font-size: 0.14rem">{{
                                        item.city
                                    }}</span>
                                    <span style="font-size: 0.14rem">{{
                                        item.code
                                    }}</span>
                                    <span style="font-size: 0.14rem">{{
                                        item.school_name
                                    }}</span>
                                    <span style="font-size: 0.12rem">{{
                                        item.number
                                    }}</span>
                                    <span style="font-size: 0.14rem">{{
                                        item.month_done
                                    }}</span>
                                    <span style="font-size: 0.1rem">{{
                                        item.month_completion_rate
                                    }}</span>
                                    <span style="font-size: 0.14rem">{{
                                        item.stamina_compliance_rate
                                    }}</span>
                                    <span style="font-size: 0.14rem">{{
                                        item.physique_compliance_rate
                                    }}</span>
                                </li>
                            </ul>
                        </vue-seamless-scroll>
                    </div>
                    <div class="total">
                        <div class="total_minibox">
                            <p>历史总重</p>
                            <div>
                                <span class="qin">{{
                                    totaldata.total_weight
                                }}</span>
                                <span class="dw">kg</span>
                            </div>
                        </div>
                        <div class="total_minibox">
                            <p>今年总重</p>
                            <div>
                                <span class="lan">{{
                                    totaldata.year_weight
                                }}</span>
                                <span class="dw">kg</span>
                            </div>
                        </div>
                        <div class="total_minibox">
                            <p>本月总重</p>
                            <div>
                                <span class="qin">{{
                                    totaldata.month_weight
                                }}</span>
                                <span class="dw">kg</span>
                            </div>
                        </div>
                        <div class="total_minibox">
                            <p>社区统计</p>
                            <div>
                                <span class="lan">{{
                                    totaldata.hut_total
                                }}</span>
                                <span class="dw">个</span>
                            </div>
                        </div>
                        <div class="total_minibox">
                            <p>品类</p>
                            <div>
                                <span class="lan">{{
                                    totaldata.types_total
                                }}</span>
                                <span class="dw">类</span>
                            </div>
                        </div>
                        <div class="total_minibox">
                            <p>日均</p>
                            <div>
                                <span class="lan">{{
                                    totaldata.day_average
                                }}</span>
                                <span class="dw">kg</span>
                            </div>
                        </div>
                        <div class="total_minibox" style="width: 15%">
                            <p>总价值(元)</p>
                            <div>
                                <span class="lan">{{
                                    totaldata.total_value
                                }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!--社区分布-->
                <div class="table wdfb">
                    <div class="wdfb_left">
                        <label class="title">社区分布</label>
                        <div class="header_table">
                            <span></span>
                            <span>社区名称</span>
                            <span>状态</span>
                            <span>负责人</span>
                            <span>联系电话</span>
                            <span>累积量(kg)</span>
                        </div>
                        <div
                            class="list_scrool"
                            v-loading="table_son.length == 0"
                            element-loading-background="rgb(24,26,33)">
                            <vue-seamless-scroll
                                v-if="table_son.length > 0"
                                :data="table_son"
                                :class-option="defaultOption">
                                <ul class="ul-scoll cur">
                                    <li
                                        v-for="(item, index) in table_son"
                                        :key="index"
                                        @click="godan(item)">
                                        <span
                                            ><span>{{ index + 1 }}</span></span
                                        >
                                        <span style="font-size: 0.14rem">{{
                                            item.city
                                        }}</span>
                                        <span
                                            :class="
                                                item.state == 2
                                                    ? 'hongse'
                                                    : 'lanse'
                                            "
                                            >●</span
                                        >
                                        <span style="font-size: 0.14rem">{{
                                            item.contact
                                        }}</span>
                                        <span style="font-size: 0.12rem">{{
                                            item.telphone
                                        }}</span>
                                        <span style="font-size: 0.14rem">{{
                                            item.month_done
                                        }}</span>
                                    </li>
                                </ul>
                            </vue-seamless-scroll>
                        </div>
                    </div>
                    <!--3d地图存放-->
                    <div class="wdfb_right">
                        <div
                            id="charts05"
                            class="echart_box charts05"
                            style="width: 100%; height: 100%"></div>
                    </div>
                </div>
            </div>

            <div class="mid_echart">
                <div class="kanban">
                    <div
                        v-for="(item, index) in imglist"
                        :key="index"
                        @mouseover="setindex(index)">
                        <img
                            :src="
                                index == left_index ? item.img2 : item.img1
                            " />
                        <label :class="index == left_index ? 'active' : ''">{{
                            item.name
                        }}</label>
                        <label :class="index == left_index ? 'active' : ''"
                            >类别代码：{{ item.code }}</label
                        >
                    </div>
                </div>
                <div
                    v-loading="loadingflag"
                    id="charts01"
                    class="echart_box charts01"></div>
                <div
                    v-loading="data_echarts02"
                    id="charts02"
                    class="echart_box charts02"></div>
            </div>
            <!-- <div class="right_echart"  v-loading="pieloading" element-loading-background="#181A21">
				<div id="charts03" class="echart_box charts03"></div>
				<div id="charts04" class="echart_box charts04"></div>
				<div id="charts05" class="echart_box charts05"></div>
			</div> -->
        </div>

        <div
            style="
                width: 100vw;
                height: 100vh;
                position: fixed !important;
                left: 0;
                top: 0;
                z-index: 1;
            ">
            <div id="map" style="width: 100%; height: 100%"></div>
        </div>
    </div>
</template>

<script>
import * as echarts from "echarts";
import echartsgl from "echarts-gl";
import vueSeamlessScroll from "vue-seamless-scroll/src";
var cywc_zyq = require("./test.json"); //引入geojson文件
export default {
    components: {
        vueSeamlessScroll,
    },
    data() {
        return {
            timeer: "", //实时时间定时器
            timenow: "", //时间
            years: "", //年份下拉框
            yearsoptions: [
                {
                    value: "Option1",
                    label: "2022",
                },
                {
                    value: "Option2",
                    label: "2021",
                },
                {
                    value: "Option3",
                    label: "2020",
                },
            ],
            xz: "", //乡镇下拉框
            xzoptions: [
                {
                    value: "Option1",
                    label: "三角镇",
                },
                {
                    value: "Option2",
                    label: "四海镇",
                },
                {
                    value: "Option3",
                    label: "青海湖乡",
                },
            ],
            cun: "", //村/景点
            cunoptions: [
                {
                    value: "Option1",
                    label: "乡村1",
                },
                {
                    value: "Option2",
                    label: "乡村2",
                },
            ],
            wangd: "", //社区
            wangdoptions: [
                {
                    value: "Option1",
                    label: "某某社区",
                },
            ],
            imglist: [
                {
                    img1: require("../assets/img/kanban/1(2).png"),
                    img2: require("../assets/img/kanban/2(2).png"),
                    name: "废纸",
                    code: "04",
                },
                {
                    img1: require("../assets/img/kanban/1(8).png"),
                    img2: require("../assets/img/kanban/2(8).png"),
                    name: "废铁",
                    code: "09",
                },
                {
                    img1: require("../assets/img/kanban/1(4).png"),
                    img2: require("../assets/img/kanban/2(4).png"),
                    name: "家电",
                    code: "14",
                },
                {
                    img1: require("../assets/img/kanban/1(1).png"),
                    img2: require("../assets/img/kanban/2(1).png"),
                    name: "废玻璃",
                    code: "08",
                },
                {
                    img1: require("../assets/img/kanban/1(7).png"),
                    img2: require("../assets/img/kanban/2(7).png"),
                    name: "废塑料",
                    code: "06",
                },
                {
                    img1: require("../assets/img/kanban/1(10).png"),
                    img2: require("../assets/img/kanban/2(10).png"),
                    name: "废有色金属",
                    code: "10",
                },
                {
                    img1: require("../assets/img/kanban/1(3).png"),
                    img2: require("../assets/img/kanban/2(3).png"),
                    name: "牛羊杂骨",
                    code: "32",
                },
                {
                    img1: require("../assets/img/kanban/1(5).png"),
                    img2: require("../assets/img/kanban/2(5).png"),
                    name: "废橡胶",
                    code: "05",
                },
                {
                    img1: require("../assets/img/kanban/1(6).png"),
                    img2: require("../assets/img/kanban/2(6).png"),
                    name: "废泡沫",
                    code: "06",
                },
                {
                    img1: require("../assets/img/kanban/1(9).png"),
                    img2: require("../assets/img/kanban/2(9).png"),
                    name: "废棉纺",
                    code: "01",
                },
            ],
            table: [], //表格数据
            totaldata: "", //总计
            table_son: [], //社区分布
            myChart01: "",
            myChart02: "",
            myChart03: "",
            myChart04: "",
            myChart05: "",
            pieloading: true,
            left_index: -1, //悬浮图片变化
            midtimerr: "", //中间折线图定时器
            timer_tooltip: "", //循环hover定时器
            data_echarts02: [], //第二个折线图的数据
            timer_echart02: "", //第二个折线图定时器
            alltimer: "", //总定时器
            alltimertable: "",
            loadingflag: true,
        };
    },
    mounted() {
        // this.create3D()
        this.echart01();
        this.echart02();
        // this.echart03()
        // this.echart04()
        this.echart05();
        this.midtimer();

        this.$post({ url: "/api/hut/index" }).then((res) => {
            

            // GL版命名空间为BMapGL
            // 按住鼠标右键，修改倾斜角和角度
            var map = new BMapGL.Map("map"); // 创建Map实例
            map.centerAndZoom(new BMapGL.Point(101.772498, 36.656239), 15); // 初始化地图,设置中心点坐标和地图级别
            let NavigationControl3D = new BMapGL.NavigationControl3D();
            map.addControl(NavigationControl3D);
            map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
            map.setMapStyleV2({
                styleId: "390a459f3b927d6b951ca146430b11ec", //官网地图api个性化获取
                //   styleJson:[{}] //也可以json方式个性化
            });


			res.list.forEach((item) => {
				if(item.lat){
					let newp = new BMapGL.Point(Number(item.lon), Number(item.lat));
					addMarker(newp, item.name, item.address);
				}				
			});

            // let newp = new BMapGL.Point(101.772498, 36.656239);
            // addMarker(newp, "网点一", "青海省西宁市xxx");

            function addMarker(point, titlename, info) {
                // var myIcon = new BMapGL.Icon(require('../assets/u218.png'), new BMapGL.Size(64,64), {
                // 	//BMap.Size类表示以指定的宽度和高度创建一个矩形区域大小，有的时候图标太大，Size太小，可能不能显示图标或显示一部分图标
                // 	imageSize: new BMapGL.Size(64, 64), //设置显示图像的大小，因为256*256太大，所以可以设置它实际显示的长宽比例为25.6*25.6，相当于缩小十倍了
                // 	anchor: new BMapGL.Size(30, 30), //标注指向的地理位置距离图标左上角各偏移13和25.6像素(一般宽度是照片宽的一般，长度是照片的长，这样图标的
                // 	//   尖角就能刚好点在坐标点上，否则是图标的中心点在坐标点上)，本例中该位置即是图标中央下端的尖角位置
                // });
                // var marker = new BMapGL.Marker(point, {
                // 	icon: myIcon
                // });
                var marker = new BMapGL.Marker(point);
                console.log(marker);
                map.addOverlay(marker);
                var opts = {
                    width: 150, // 信息窗口宽度
                    height: 50, // 信息窗口高度
                    title: titlename, // 信息窗口标题
                    message: titlename,
                };
                var infoWindow = new BMapGL.InfoWindow(info, opts); // 创建信息窗口对
                marker.addEventListener("click", function () {
                    map.openInfoWindow(infoWindow, point); //开启信息窗口
                });
            }
        });
    },
    unmounted() {
        clearInterval(this.timeer);
        clearInterval(this.alltimer);
        clearInterval(this.midtimerr);
        clearInterval(this.timer_echart02);
        clearInterval(this.alltimertable);
    },
    methods: {
        gobalck() {
            this.$router.back();
        },
        godan(item) {
            this.$router.push("./dandata?id=" + item.id);
        },
        finishgun() {
            this.gettabledata();
        },
        setindex(index) {
            //鼠标悬浮改变图片
            this.left_index = index;
            this.changezxt();
        },

        //实时显示时间
        time() {
            var date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();
            let hours = date.getHours();
            let minutes = date.getMinutes();
            let seconds = date.getSeconds();
            this.timenow =
                year +
                "年" +
                month +
                "月" +
                day +
                "日" +
                "\t" +
                hours +
                ":" +
                minutes +
                ":" +
                seconds +
                "\t";
        },

        //3D地图charts
        create3D() {
            let this_ = this;
            let myChart = echarts.init(
                document.getElementById("chart_example")
            );
            // 注册地图名字(tongren)和数据(geoJson)
            echarts.registerMap("xicheng", cywc_zyq, {});

            // 隐藏动画加载效果。
            myChart.hideLoading();

            // 图表配置项
            var option = {
                title: {
                    // 标题
                    top: "5%",
                    text: "青海省",
                    subtext: "",
                    x: "center",
                    textStyle: {
                        color: "#ccc",
                    },
                },

                tooltip: {
                    // 提示框
                    trigger: "item",
                    formatter: function (params) {
                        return params.name + "总计：" + params.value;
                    },
                },

                series: [
                    {
                        type: "map3D", // 系列类型
                        name: "map3D", // 系列名称
                        map: "xicheng", // 地图类型。echarts-gl 中使用的地图类型同 geo 组件相同(ECharts 中提供了两种格式的地图数据，一种是可以直接 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。还有一种是 JSON 文件，需要通过 AJAX 异步加载后手动注册。)

                        label: {
                            // 标签的相关设置
                            show: false, // (地图上的城市名称)是否显示标签 [ default: false ]
                            // distance: 50,               // 标签距离图形的距离，在三维的散点图中这个距离是屏幕空间的像素值，其它图中这个距离是相对的三维距离
                            formatter: "{b}", // 标签内容格式器
                            textStyle: {
                                // 标签的字体样式
                                color: "#000", // 地图初始化区域字体颜色
                                fontSize: 12, // 字体大小
                                opacity: 1, // 字体透明度
                                backgroundColor: "rgba(0,23,11,0)", // 字体背景色
                            },
                        },

                        itemStyle: {
                            // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
                            color: "rgba(4,173,161,0.5)", // 地图板块的颜色
                            opacity: 1, // 图形的不透明度 [ default: 1 ]
                            borderWidth: 0.5, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
                            borderColor: "#000", // 图形描边的颜色。[ default: #333 ]
                        },

                        emphasis: {
                            // 鼠标 hover 高亮时图形和标签的样式 (当鼠标放上去时  label和itemStyle 的样式)
                            label: {
                                // label高亮时的配置
                                show: true,
                                textStyle: {
                                    color: "#fff", // 高亮时标签颜色变为 白色
                                    fontSize: 12, // 高亮时标签字体 变大
                                },
                            },
                            itemStyle: {
                                // itemStyle高亮时的配置
                                areaColor: "#88f", // 高亮时地图板块颜色改变
                                color: "#0e81c1",
                            },
                        },

                        groundPlane: {
                            // 地面可以让整个组件有个“摆放”的地方，从而使整个场景看起来更真实，更有模型感。
                            show: false, // 是否显示地面。[ default: false ]
                            color: "#aaa", // 地面颜色。[ default: '#aaa' ]
                        },

                        regions: [
                            {
                                // 可对单个地图区域进行设置
                                name: "西宁市", // 所对应的地图区域的名称
                                //regionHeight: '',			// 区域的高度，可以设置不同的高度用来表达数据的大小。当 GeoJSON 为建筑的数据时，也可以通过这个值表示简直的高度。
                                itemStyle: {
                                    // 单个区域的样式设置
                                    color: "#00FF00",
                                    opacity: 1,
                                    borderWidth: 0.4,
                                    borderColor: "#5F9EA0",
                                },
                            },
                            {
                                name: "海东市",
                                itemStyle: {
                                    color: "#EEEE00",
                                    opacity: 1,
                                    borderWidth: 0.4,
                                    borderColor: "#5F9EA0",
                                },
                            },
                        ],

                        //shading: 'lambert',       // 三维地理坐标系组件中三维图形的着色效果，echarts-gl 中支持下面三种着色方式:
                        // 'color' 只显示颜色，不受光照等其它因素的影响。
                        // 'lambert' 通过经典的 lambert 着色表现光照带来的明暗。
                        // 'realistic' 真实感渲染，配合 light.ambientCubemap 和 postEffect 使用可以让展示的画面效果和质感有质的提升。ECharts GL 中使用了基于物理的渲染（PBR） 来表现真实感材质。
                        // realisticMaterial: {}    // 真实感材质相关的配置项，在 shading 为'realistic'时有效。
                        // lambertMaterial: {}      // lambert 材质相关的配置项，在 shading 为'lambert'时有效。
                        // colorMaterial: {}        // color 材质相关的配置项，在 shading 为'color'时有效。

                        light: {
                            // 光照相关的设置。在 shading 为 'color' 的时候无效。  光照的设置会影响到组件以及组件所在坐标系上的所有图表。合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。
                            main: {
                                // 场景主光源的设置，在 globe 组件中就是太阳光。
                                color: "#fff", //主光源的颜色。[ default: #fff ]
                                intensity: 1.2, //主光源的强度。[ default: 1 ]
                                shadow: false, //主光源是否投射阴影。默认关闭。    开启阴影可以给场景带来更真实和有层次的光照效果。但是同时也会增加程序的运行开销。
                                //shadowQuality: 'high',      // 阴影的质量。可选'low', 'medium', 'high', 'ultra' [ default: 'medium' ]
                                alpha: 55, // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。[ default: 40 ]
                                beta: 10, // 主光源绕 y 轴，即左右旋转的角度。[ default: 40 ]
                            },
                            ambient: {
                                // 全局的环境光设置。
                                color: "#fff", // 环境光的颜色。[ default: #fff ]
                                intensity: 0.5, // 环境光的强度。[ default: 0.2 ]
                            },
                        },

                        viewControl: {
                            // 用于鼠标的旋转，缩放等视角控制。
                            projection: "perspective", // 投影方式，默认为透视投影'perspective'，也支持设置为正交投影'orthographic'。
                            autoRotate: false, // 是否开启视角绕物体的自动旋转查看。[ default: false ]
                            autoRotateDirection: "cw", // 物体自传的方向。默认是 'cw' 也就是从上往下看是顺时针方向，也可以取 'ccw'，既从上往下看为逆时针方向。
                            autoRotateSpeed: 10, // 物体自传的速度。单位为角度 / 秒，默认为10 ，也就是36秒转一圈。
                            autoRotateAfterStill: 3, // 在鼠标静止操作后恢复自动旋转的时间间隔。在开启 autoRotate 后有效。[ default: 3 ]
                            damping: 0, // 鼠标进行旋转，缩放等操作时的迟滞因子，在大于等于 1 的时候鼠标在停止操作后，视角仍会因为一定的惯性继续运动（旋转和缩放）。[ default: 0.8 ]
                            rotateSensitivity: 1, // 旋转操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。默认为1, 设置为0后无法旋转。	rotateSensitivity: [1, 0]——只能横向旋转； rotateSensitivity: [0, 1]——只能纵向旋转。
                            zoomSensitivity: 1, // 缩放操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法缩放。
                            panSensitivity: 1, // 平移操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法平移。支持使用数组分别设置横向和纵向的平移灵敏度
                            panMouseButton: "left", // 平移操作使用的鼠标按键，支持：'left' 鼠标左键（默认）;'middle' 鼠标中键 ;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
                            rotateMouseButton: "left", // 旋转操作使用的鼠标按键，支持：'left' 鼠标左键;'middle' 鼠标中键（默认）;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)

                            distance: 120, // [ default: 100 ] 默认视角距离主体的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离,对于 globe 来说是距离地球表面的距离。在 projection 为'perspective'的时候有效。
                            minDistance: 40, // [ default: 40 ] 视角通过鼠标控制能拉近到主体的最小距离。在 projection 为'perspective'的时候有效。
                            maxDistance: 400, // [ default: 400 ] 视角通过鼠标控制能拉远到主体的最大距离。在 projection 为'perspective'的时候有效。

                            alpha: 40, // 视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。[ default: 40 ]
                            beta: 15, // 视角绕 y 轴，即左右旋转的角度。[ default: 0 ]
                            minAlpha: -360, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
                            maxAlpha: 360, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
                            minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
                            maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]

                            center: [0, 0, 0], // 视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]。

                            animation: true, // 是否开启动画。[ default: true ]
                            animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
                            animationEasingUpdate: "cubicInOut", // 过渡动画的缓动效果。[ default: cubicInOut ]
                        },

                        data: [
                            // 可对单个地图区域进行设置
                            {
                                name: "西宁市", // 所对应的地图区域的名称
                                value: 17000,
                                regionHeight: "20", // 区域的高度，可以设置不同的高度用来表达数据的大小。当 GeoJSON 为建筑的数据时，也可以通过这个值表示简直的高度。
                                itemStyle: {
                                    // 单个区域的样式设置
                                    color: "#0e81c1",
                                    opacity: 1,
                                    borderWidth: 0.4,
                                    borderColor: "#5F9EA0",
                                },
                            },
                        ],
                    },
                ],
            };

            // 设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过setOption完成，ECharts 会合并新的参数和数据，然后刷新图表。
            myChart.setOption(option);

            //   myChart.setOption(option);
            // myChart.on('click', function (param) {
            //       console.info('点击' + JSON.stringify(param.data) ) // 柱状图上的数值并不会弹出
            //       // this.openMessage() // 这个方法也没执行
            //       //可根据 param.data.name 进行判断 跳转 第七区
            // })

            //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        },

        //单品回收量走势
        echart01() {
            this.changezxt();
        },

        //各类回收统计
        echart02() {
            this.data_echarts02 = [];
            var datalist = [];
            this.$post({ url: "/api/DataScreen/getTypeAmount" }).then((res) => {
                res.forEach((item, index) => {
                    let arry = [];
                    for (var i in item.data) {
                        arry.push(item.data[i].product_num);
                    }

                    let obj = {
                        name: item.materialName,
                        data: arry,
                        type: "line",
                    };
                    datalist.push(obj);
                });
                const test = { chart: null };
                test.chart = echarts.init(document.getElementById("charts02"));
                var option2 = {
                    title: {
                        text: "各类回收量统计(kg)",
                        top: "2%",
                        left: "center",
                        textStyle: {
                            color: "#FFFFFF",
                        },
                    },
                    tooltip: {
                        trigger: "axis",
                        formatter: function (params) {
                            var s =
                                '<span style="width:100%;text-align:center;">' +
                                params[0].name +
                                "</span>" +
                                "<br/>";
                            // 					params.forEach((item,index)=>{
                            // 						if(index%3==0&&index!=0){
                            // 			s+='<span style="color:'+item.color+';">'+item.seriesName+'</span>:&nbsp;'+item.value+'<br/>';
                            // 						}else{
                            // s+='<span style="color:'+item.color+';">'+item.seriesName+'</span>:&nbsp;'+item.value+'&nbsp;&nbsp;&nbsp;';
                            // 						}

                            // 					})
                            let datadom = "";
                            params.forEach((item, index) => {
                                if (index % 3 == 0 && index != 0) {
                                    datadom +=
                                        '<span class="item">' +
                                        '<span class="item_name" style="color:' +
                                        item.color +
                                        ';">' +
                                        item.seriesName +
                                        "</span>:&nbsp;" +
                                        item.value +
                                        "</span>";
                                } else {
                                    datadom +=
                                        '<span class="item">' +
                                        '<span class="item_name" style="color:' +
                                        item.color +
                                        ';">' +
                                        item.seriesName +
                                        "</span>:&nbsp;" +
                                        item.value +
                                        "&nbsp;&nbsp;&nbsp;" +
                                        "</span>";
                                }
                            });
                            // console.log(`<div class="toolDiv">${params[0].name}<div class="toolitem">${datadom}</div></div>`)
                            return `<div class="toolDiv">${params[0].name}<div class="toolitem">${datadom}</div></div>`;

                            // var values=params.value.toString().split(",");

                            // s+='进件效率'+values[1]+'\n';
                            // s+='运营能力'+values[2]+'\n';
                            // s+='贷后能力'+values[3]+'\n';
                            // s+='风控能力'+values[4]+'\n';
                            // //系列名称:seriesName: string  数据名，类目名 : name: string   传入的数据值:value: number|Array
                            // return s;
                        },
                    },
                    grid: {
                        top: "18%",
                        left: "3%",
                        right: "3%",
                        bottom: "12%",
                        containLabel: true,
                    },
                    legend: {
                        data: [
                            "1月",
                            "2月",
                            "3月",
                            "4月",
                            "5月",
                            "6月",
                            "7月",
                            "8月",
                            "9月",
                            "10月",
                            "11月",
                            "12月",
                        ],
                    },
                    xAxis: {
                        type: "category",
                        axisLabel: {
                            show: true,
                            interval: 0,
                        },
                        data: [
                            "1月",
                            "2月",
                            "3月",
                            "4月",
                            "5月",
                            "6月",
                            "7月",
                            "8月",
                            "9月",
                            "10月",
                            "11月",
                            "12月",
                        ],
                    },
                    yAxis: {
                        type: "value",
                        axisLabel: {
                            formatter: function (val) {
                                return val;
                            },
                        },
                    },
                    series: datalist,
                };
                // // 使用刚指定的配置项和数据显示图表。

                test.chart.setOption(option2, true);
                clearInterval(this.timer_echart02);
                var echar02_i = 0;
                this.timer_echart02 = setInterval(() => {
                    if (echar02_i != 0) {
                        test.chart.dispatchAction({
                            type: "downplay",
                            dataIndex: echar02_i - 1,
                        });
                    }
                    test.chart.dispatchAction({
                        type: "showTip",
                        seriesIndex: 1,
                        dataIndex: echar02_i,
                    });
                    echar02_i++;
                    if (datalist[0].data.length == echar02_i) {
                        test.chart.dispatchAction({
                            type: "downplay",
                            dataIndex: echar02_i - 1,
                        });
                        echar02_i = 0;
                    }
                }, 2000);
            });
        },

        //各品类占比
        echart03() {
            this.myChart03 = echarts.init(document.getElementById("charts03"));
        },

        //每月占比
        echart04() {
            this.myChart04 = echarts.init(document.getElementById("charts04"));
        },

        //各品回收点占比
        echart05() {
            this.myChart05 = echarts.init(document.getElementById("charts05"));
        },

        //中间折线图设置定时器变化
        midtimer() {
            this.midtimerr = setInterval(() => {
                this.left_index++;
                if (this.left_index == this.imglist.length) {
                    this.left_index = 0;
                }
                this.changezxt();
            }, 6000);
        },
        changezxt() {
            //第一个折线图变化
            const test = { chart: null };
            test.chart = echarts.init(document.getElementById("charts01"));
            var id = -1;
            var id_name = "";
            var dataarr = [];
            switch (this.left_index) {
                case 0:
                    id = 2;
                    id_name = "废纸";
                    break;
                case 1:
                    id = 4;
                    id_name = "废铁";
                    break;
                case 2:
                    id = 5;
                    id_name = "家电";
                    break;
                case 3:
                    id = 10;
                    id_name = "废玻璃";
                    break;
                case 4:
                    id = 3;
                    id_name = "废塑料";
                    break;
                case 5:
                    id = 6;
                    id_name = "废有色金属";
                    break;
                case 6:
                    id = 9;
                    id_name = "牛羊杂骨";
                    break;
                case 7:
                    id = 11;
                    id_name = "废橡胶";
                    break;
                case 8:
                    id = 8;
                    id_name = "废泡沫";
                    break;
                case 9:
                    id = 12;
                    id_name = "废棉纺";
                    break;
            }
            this.$post({
                url: "/api/DataScreen/getTypesTrend",
                params: { id: id },
            }).then((res) => {
                this.loadingflag = false;
                for (var i in res) {
                    dataarr.push(res[i].product_num);
                }
                //第一个折线图变化
                var option = {
                    title: {
                        text: id_name + "单品回收量走势(kg)",
                        top: "2%",
                        left: "center",
                        textStyle: {
                            color: "#FFFFFF",
                        },
                    },
                    tooltip: {
                        trigger: "axis",
                    },
                    grid: {
                        top: "18%",
                        left: "3%",
                        right: "3%",
                        bottom: "12%",
                        containLabel: true,
                    },
                    legend: {
                        show: false,
                        left: "center",
                        bottom: "2%",
                        textStyle: {
                            color: "#FFFFFF",
                        },
                        data: ["单品回收量走势(kg)"],
                    },
                    xAxis: {
                        type: "category",
                        axisLabel: {
                            show: true,
                            interval: 0,
                        },
                        data: [
                            "1月",
                            "2月",
                            "3月",
                            "4月",
                            "5月",
                            "6月",
                            "7月",
                            "8月",
                            "9月",
                            "10月",
                            "11月",
                            "12月",
                        ],
                    },
                    yAxis: {
                        type: "value",

                        axisLabel: {
                            formatter: function (val) {
                                return val;
                            },
                        },
                    },
                    // color:['#818181','#00baff'],
                    series: [
                        {
                            name: "单品回收量走势(kg)",
                            data: dataarr,
                            type: "line",
                        },
                    ],
                };
                // 使用刚指定的配置项和数据显示图表。
                test.chart.setOption(option);
            });
        },

        //获取表格数据
        gettabledata() {
            this.$post({ url: "/api/DataScreen/RealTimeData" }).then((res) => {
                this.totaldata = res.statistics;
                this.table = [];
                res.data.forEach((item2, index2) => {
                    let obj = {
                        city: item2.product_name,
                        code: item2.code,
                        school_name: item2.product_num,
                        number: item2.hut_name,
                        month_done: item2.hut_contact,
                        month_completion_rate: item2.saleTime,
                        stamina_compliance_rate: item2.day_total,
                        physique_compliance_rate: item2.month_total,
                    };
                    this.table.push(obj);
                });
            });
        },
        //获取社区分布数据
        getwddata() {
            this.$post({ url: "/api/DataScreen/SpotData" }).then((res) => {
                this.table_son = [];
                res.HutData.forEach((item, index) => {
                    let obj = {
                        city: item.name,
                        contact: item.contact,
                        telphone: item.telphone,
                        state: item.state,
                        month_done: item.total,
                        id: item.hut_id,
                    };

                    this.table_son.push(obj);
                });
            });
        },
        //饼图数据
        getbtdata() {
            this.$post({ url: "/api/DataScreen/PieChartData" }).then((res) => {
                this.pieloading = false;
                //每月占比
                let datalist = [];
                res.monthRatio.forEach((item, index) => {
                    let obj = {
                        value: item.month_total,
                        name: item.materialName,
                    };
                    datalist.push(obj);
                });
                // 指定图表的配置项和数据
                var option4 = {
                    title: {
                        text: "每月占比",
                        subtext: "",
                        left: "center",
                        textStyle: {
                            color: "#FFFFFF",
                        },
                    },
                    legend: {
                        show: false,
                        orient: "vertical",
                        top: "5%",
                        left: "5%",
                        textStyle: {
                            color: "rgb(129,129,129)",
                        },
                    },
                    tooltip: {
                        trigger: "item",
                        formatter: "{b} :{d}%",
                    },

                    series: [
                        {
                            name: "",
                            type: "pie",
                            radius: ["40%", "70%"],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: "center",
                                formatter: function (e) {
                                    var newStr = " ";
                                    var newStr2 = " ";
                                    newStr = e.name + "\n";
                                    newStr2 += newStr + e.percent + "%"; //添加百分号处理
                                    return newStr2;
                                },
                                fontSize: 10,
                                color: "#818181",
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: "20",
                                    fontWeight: "bold",
                                },
                            },
                            labelLine: {
                                show: false,
                            },
                            data: datalist,
                        },
                    ],
                };
                // 使用刚指定的配置项和数据显示图表。
                // this.myChart04.setOption(option4);

                //各品类占比
                let datalist2 = [];
                res.typeRatio.forEach((item, index) => {
                    let obj = {
                        value: item.total,
                        name: item.materialName,
                    };
                    datalist2.push(obj);
                });
                // 指定图表的配置项和数据
                var option3 = {
                    title: {
                        text: "各品类占比",
                        subtext: "",
                        left: "center",
                        textStyle: {
                            color: "#FFFFFF",
                        },
                    },
                    tooltip: {
                        trigger: "item",
                        formatter: "{b} : {c} ({d}%)",
                    },
                    toolbox: {
                        show: false,
                    },
                    series: [
                        {
                            name: "",
                            type: "pie",
                            radius: "50%",
                            data: datalist2,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: "rgba(0, 0, 0, 0.5)",
                                },
                                normal: {
                                    label: {
                                        show: true,
                                        formatter: "{b} :{d}%",
                                        fontSize: 12,
                                        color: "#818181",
                                    },
                                    labelLine: {
                                        show: true,
                                    },
                                },
                            },
                        },
                    ],
                };
                // 使用刚指定的配置项和数据显示图表。
                // this.myChart03.setOption(option3);

                //各回收站占比
                let datalist3 = [];
                res.spotRatio.forEach((item, index) => {
                    let obj = {
                        value: item.total,
                        name: item.name,
                    };
                    datalist3.push(obj);
                });
                // 指定图表的配置项和数据
                var option5 = {
                    title: {
                        text: "各回收点占比",
                        subtext: "",
                        left: "center",
                        textStyle: {
                            color: "#FFFFFF",
                        },
                    },
                    color: ["#5C7BD9", "#73C0DE", "#E1DC60"],
                    tooltip: {
                        trigger: "item",
                        formatter: "{b} : {c} ({d}%)",
                    },
                    toolbox: {
                        show: false,
                    },
                    legend: {
                        show: false,
                        orient: "vertical",
                        top: "5%",
                        left: "5%",
                        textStyle: {
                            color: "rgb(129,129,129)",
                        },
                    },
                    series: [
                        {
                            name: "需求类型占比",
                            type: "pie",
                            center: ["50%", "55%"],
                            radius: "80%",
                            label: {
                                normal: {
                                    show: false,
                                },
                            },
                            labelLine: {
                                show: false,
                                length: 0,
                                length2: 0,
                            },
                            label: {
                                normal: {
                                    show: true,
                                    position: "inside",
                                    formatter: "{d}%",
                                    fontSize: 14,
                                    color: "#FFFFFF",
                                    rich: {
                                        value: {
                                            fontSize: 20,
                                            color: "#ffffff",
                                        },
                                    },
                                },
                            },
                            data: datalist3,
                        },
                    ],
                };
                // 使用刚指定的配置项和数据显示图表。
                this.myChart05.setOption(option5);

                this.settimer(
                    datalist.length,
                    datalist3.length,
                    datalist2.length
                );
            });
        },

        settimer(length1, length2, length3) {
            var i = 0,
                i2 = 0,
                i3 = 0;
            this.myChart04.on("mouseover", (params) => {
                for (let i1 = 0; i1 <= length1; i1++) {
                    this.myChart04.dispatchAction({
                        type: "downplay",
                        dataIndex: i1,
                    });
                }
                this.myChart04.dispatchAction({
                    type: "highlight",
                    dataIndex: params.dataIndex,
                }); // dataIndex属性伟data传入的索引值
                this.myChart04.dispatchAction({
                    type: "showTip",
                    seriesIndex: 0,
                    dataIndex: params.dataIndex,
                });
            });
            this.timer_tooltip = setInterval(() => {
                for (let i1 = 0; i1 <= length1; i1++) {
                    this.myChart04.dispatchAction({
                        type: "downplay",
                        dataIndex: i1,
                    });
                }

                this.myChart04.dispatchAction({
                    type: "highlight",
                    dataIndex: i,
                }); // dataIndex属性伟data传入的索引值
                this.myChart04.dispatchAction({
                    type: "showTip",
                    seriesIndex: 0,
                    dataIndex: i,
                });
                i++;
                if (i == length1) {
                    this.myChart04.dispatchAction({
                        type: "downplay",
                        dataIndex: i - 1,
                    });
                    i = 0;
                }

                for (let echarti2 = 0; echarti2 < length2; echarti2++) {
                    this.myChart05.dispatchAction({
                        type: "downplay",
                        dataIndex: echarti2,
                    });
                }
                this.myChart05.dispatchAction({
                    type: "highlight",
                    dataIndex: i2,
                }); // dataIndex属性伟data传入的索引值
                this.myChart05.dispatchAction({
                    type: "showTip",
                    seriesIndex: 0,
                    dataIndex: i2,
                });
                i2++;
                if (i2 == length1) {
                    i2 = 0;
                }

                for (let echarti3 = 0; echarti3 < length3; echarti3++) {
                    this.myChart03.dispatchAction({
                        type: "downplay",
                        dataIndex: echarti3,
                    });
                }
                this.myChart03.dispatchAction({
                    type: "highlight",
                    dataIndex: i3,
                }); // dataIndex属性伟data传入的索引值
                this.myChart03.dispatchAction({
                    type: "showTip",
                    seriesIndex: 0,
                    dataIndex: i3,
                });
                i3++;
                if (i3 == length3) {
                    i3 = 0;
                }
            }, 2000);
        },
        //饼图数据 用于定时器
        getbtdata222() {
            this.$post({ url: "/api/DataScreen/PieChartData" }).then((res) => {
                this.pieloading = false;
                //每月占比
                let datalist = [];
                res.monthRatio.forEach((item, index) => {
                    let obj = {
                        value: item.month_total,
                        name: item.materialName,
                    };
                    datalist.push(obj);
                });
                // 指定图表的配置项和数据
                var option4 = {
                    title: {
                        text: "每月占比",
                        subtext: "",
                        left: "center",
                        textStyle: {
                            color: "#FFFFFF",
                        },
                    },
                    legend: {
                        show: false,
                        orient: "vertical",
                        top: "5%",
                        left: "5%",
                        textStyle: {
                            color: "rgb(129,129,129)",
                        },
                    },
                    tooltip: {
                        trigger: "item",
                        formatter: "{b} :{d}%",
                    },

                    series: [
                        {
                            name: "",
                            type: "pie",
                            radius: ["40%", "70%"],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: "center",
                                formatter: function (e) {
                                    var newStr = " ";
                                    var newStr2 = " ";
                                    newStr = e.name + "\n";
                                    newStr2 += newStr + e.percent + "%"; //添加百分号处理
                                    return newStr2;
                                },
                                fontSize: 10,
                                color: "#818181",
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: "20",
                                    fontWeight: "bold",
                                },
                            },
                            labelLine: {
                                show: false,
                            },
                            data: datalist,
                        },
                    ],
                };
                // 使用刚指定的配置项和数据显示图表。
                this.myChart04.setOption(option4);

                //各品类占比
                let datalist2 = [];
                res.typeRatio.forEach((item, index) => {
                    let obj = {
                        value: item.total,
                        name: item.materialName,
                    };
                    datalist2.push(obj);
                });
                // 指定图表的配置项和数据
                var option3 = {
                    title: {
                        text: "各品类占比",
                        subtext: "",
                        left: "center",
                        textStyle: {
                            color: "#FFFFFF",
                        },
                    },
                    tooltip: {
                        trigger: "item",
                        formatter: "{b} : {c} ({d}%)",
                    },
                    toolbox: {
                        show: false,
                    },
                    series: [
                        {
                            name: "",
                            type: "pie",
                            radius: "50%",
                            data: datalist2,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: "rgba(0, 0, 0, 0.5)",
                                },
                                normal: {
                                    label: {
                                        show: true,
                                        formatter: "{b} :{d}%",
                                        fontSize: 12,
                                        color: "#818181",
                                    },
                                    labelLine: {
                                        show: true,
                                    },
                                },
                            },
                        },
                    ],
                };
                // 使用刚指定的配置项和数据显示图表。
                this.myChart03.setOption(option3);

                //各回收站占比
                let datalist3 = [];
                res.spotRatio.forEach((item, index) => {
                    let obj = {
                        value: item.total,
                        name: item.name,
                    };
                    datalist3.push(obj);
                });
                // 指定图表的配置项和数据
                var option5 = {
                    title: {
                        text: "各回收点占比",
                        subtext: "",
                        left: "center",
                        textStyle: {
                            color: "#FFFFFF",
                        },
                    },
                    color: ["#5C7BD9", "#73C0DE", "#E1DC60"],
                    tooltip: {
                        trigger: "item",
                        formatter: "{b} : {c} ({d}%)",
                    },
                    toolbox: {
                        show: false,
                    },
                    legend: {
                        show: false,
                        orient: "vertical",
                        top: "5%",
                        left: "5%",
                        textStyle: {
                            color: "rgb(129,129,129)",
                        },
                    },
                    series: [
                        {
                            name: "需求类型占比",
                            type: "pie",
                            center: ["50%", "55%"],
                            radius: "80%",
                            label: {
                                normal: {
                                    show: false,
                                },
                            },
                            labelLine: {
                                show: false,
                                length: 0,
                                length2: 0,
                            },
                            label: {
                                normal: {
                                    show: true,
                                    position: "inside",
                                    formatter: "{d}%",
                                    fontSize: 14,
                                    color: "#FFFFFF",
                                    rich: {
                                        value: {
                                            fontSize: 20,
                                            color: "#ffffff",
                                        },
                                    },
                                },
                            },
                            data: datalist3,
                        },
                    ],
                };
                // 使用刚指定的配置项和数据显示图表。
                this.myChart05.setOption(option5);
            });
        },
    },
    watch: {},
    created() {
        this.gettabledata();
        this.getwddata();
        this.getbtdata();
        this.timeer = setInterval(() => {
            this.time();
        }, 1000);
        this.alltimer = setInterval(() => {
            this.getbtdata222();
            this.echart02();
        }, 60000);
        this.alltimertable = setInterval(() => {
            this.getwddata();
        }, 30000);
    },
    computed: {
        defaultOption() {
            return {
                step: 0.2, // 数值越大速度滚动越快
                limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
            };
        },
    },
};
</script>

<style scoped lang="less">
@import url("./about.less");
</style>
